<div class="user-info-box">
  <!-- 基础信息 -->
  <nz-descriptions [nzColumn]="3" nzTitle="基础信息">
    <nz-descriptions-item nzTitle="用户名">
      <p nz-paragraph *ngIf="!isEditBasic">{{ userInfo.username }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.username" [placeholder]="userInfo.username" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="昵称">
      <p nz-paragraph *ngIf="!isEditBasic">{{ userInfo.username }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.username" [placeholder]="userInfo.username" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzEditable nzTitle="年龄">
      <p nz-paragraph *ngIf="!isEditBasic">{{ userInfo.age }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.tel" [placeholder]="userInfo.tel" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzEditable nzTitle="性别">
      <p nz-paragraph *ngIf="!isEditBasic">{{userInfo.sex }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.sex" [placeholder]="userInfo.sex" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzEditable nzTitle="籍贯">
      <p nz-paragraph *ngIf="!isEditBasic">{{ userInfo.age }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.tel" [placeholder]="userInfo.tel" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzEditable nzTitle="学历">
      <p nz-paragraph *ngIf="!isEditBasic">{{ userInfo.age }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.tel" [placeholder]="userInfo.tel" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzEditable nzTitle="现在住址">
      <p nz-paragraph *ngIf="!isEditBasic">{{ userInfo.age }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.tel" [placeholder]="userInfo.tel" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
  </nz-descriptions>

  <!-- <nz-divider></nz-divider> -->

  <!-- 安全信息 -->
  <!-- <div class="btn-box" (click)="handlerClickEdit('safe')">
    <i nz-icon nzType="edit" nzTooltipTitle="编辑" nzTooltipPlacement="topRight" nz-tooltip nzTheme="outline"></i>
  </div> -->
  <nz-descriptions [nzColumn]="1" nzTitle="安全信息" class="safe-item">
    <nz-descriptions-item nzTitle="密码">
      <div class="password-box">
        <p nz-paragraph *ngIf="!isShow">******</p>
        <p nz-paragraph *ngIf="isShow">{{ userInfo.password }}</p>
        <button nz-button nzType="default" class="user-btn" (click)="resetPassword()">重置密码</button>
      </div>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="手机号">
      <p nz-paragraph>{{ userInfo.tel }}
        <nz-switch [ngModel]="true" nzCheckedChildren="解绑" class="user-btn" nzUnCheckedChildren="绑定"></nz-switch>
      </p>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="电子邮箱">
      <!-- <p nz-paragraph *ngIf="!isEditSafe">{{ userInfo.email }}</p> -->
      <p nz-paragraph>{{ userInfo.tel }}@139.com
        <nz-switch [ngModel]="true" nzCheckedChildren="解绑" nzUnCheckedChildren="绑定" class="user-btn"></nz-switch>
      </p>
    </nz-descriptions-item>
  </nz-descriptions>

  <!-- <nz-divider></nz-divider> -->

  <!-- 其他信息 -->
  <nz-descriptions nzTitle="其他信息" class="other-item" [nzColumn]="1">
    <nz-descriptions-item nzEditable nzTitle="个性签名">
      <p nz-paragraph *ngIf="!isEditBasic">{{userInfo.sex }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.sex" [placeholder]="userInfo.sex" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzTitle="个人简介">
      <p nz-paragraph *ngIf="!isEditBasic">{{ userInfo.interduce }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <textarea rows="6" nz-input [(ngModel)]="userInfo.interduce" style="resize: none;"></textarea>
        <!-- <input type="text" nz-input [(ngModel)]="userInfo.interduce" [placeholder]="userInfo.interduce" /> -->
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
    <nz-descriptions-item nzEditable nzTitle="个人相册">
      <p nz-paragraph *ngIf="!isEditBasic">{{userInfo.sex }}</p>
      <nz-input-group *ngIf="isEditBasic" [nzSuffix]="suffixTemplate">
        <input type="text" nz-input [(ngModel)]="userInfo.sex" [placeholder]="userInfo.sex" />
      </nz-input-group>
      <ng-template #suffixTemplate>
        <i nz-icon nz-tooltip class="ant-input-clear-icon" nzTheme="fill" nzType="close-circle" *ngIf="inputValue"
          (click)="inputValue = null"></i>
      </ng-template>
    </nz-descriptions-item>
  </nz-descriptions>

  <!-- <nz-divider></nz-divider> -->

</div>

<div class="edit-box">
  <!-- 编辑 -->
  <div nz-paragraph class="btn-box" *ngIf="!isEditBasic">
    <button nz-button nzType="primary" (click)="handlerClickEdit()">编辑</button>
  </div>
  <!-- 保存 -->
  <div nz-paragraph *ngIf="isEditBasic">
    <div class="btn-box" (click)="handlerClickEdit('basic')">
      <button nz-button nzType="primary" (click)="onCancel()">取消</button>
      <button nz-button nzType="primary" (click)="onSave()">保存</button>
    </div>
  </div>
</div>
